<template>
  <div>
    <div class="editor-header">
      <nuxt-link
        class="editor-header__item"
        :class="{ 'active-bottom': content == 0 }"
        to="/cms/manager/article"
        >文章
      </nuxt-link>
      <nuxt-link
        class="editor-header__item"
        :class="{ 'active-bottom': content == 1 }"
        to="/cms/manager/video"
        >视频
      </nuxt-link>
      <nuxt-link
        class="editor-header__item"
        :class="{ 'active-bottom': content == 2 }"
        to="/cms/manager/movement"
        >动态
      </nuxt-link>
    </div>
    <nuxt-child> </nuxt-child>
  </div>
</template>
<script>
export default {
  created() {
    this.routName = this.$route.name
  },
  data() {
    return {
      routName: '',
    }
  },
  computed: {
    // 0 article 1 video 2  movement
    content() {
      let content = this.routName.split('-')[2]
      if (content) {
        switch (content) {
          case 'article':
            return 0
          case 'video':
            return 1
          case 'movement':
            return 2
        }
      }
    },
  },
  watch: {
    $route(to) {
      this.routName = to.name
    },
  },
}
</script>
<style lang="scss" scoped>
.editor-header {
  height: 72px;
  border-bottom: 1px solid rgba(#000000, 0.1);
  padding-top: 28px;
  padding-left: 34px;
  &__item {
    margin-right: 24px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(#000000, 0.6);
  }
}

.active-bottom {
  padding-bottom: 4px;
  border-bottom: 2px solid $color-royole;
  color: $color-royole !important;
}
</style>
